<template>
    <div class="layout">
        <Header></Header>
        <div class="body">
            <Menu class="left"></Menu>
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/common/Header";
import Menu from "@/components/common/Menu";
export default {
    data(){
        return {}
    },
    mounted() {},
    methods:{},
    components:{
        Header,
        Menu
    }
}
</script>

<style lang="less" scoped>
.layout{
    min-height: 100vh;
    background:#F6F7F7;
    overflow-x: hidden;
    overflow-y: auto;
    .body{
        min-height: calc(100vh - 5rem);
        margin-top: 1.25rem;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        .left{
            flex-shrink: 0;
        }
        .main{
            flex: 1;
            margin-right: 1.25rem;
            min-width: 0;
            overflow-x: hidden;
        }
    }
}
</style>
